<template>
  <div class="plan-detail-layout">
    <div class="plan">
      <div class="plan-line">
          <span class="line" v-for="(item,index) in planDetail.lines">
              {{item.lineNo}}
              <i class="icon-to" v-if="index!==planDetail.lines.length-1"></i>
            <i class="fa fa-long-arrow-right arrow" aria-hidden="true" v-if="index!==planDetail.lines.length-1"></i>
          </span>
      </div>
      <div class="plan-data">
        <span class="time">约{{(planDetail.time/ 60).toFixed(0)>59?`${parseInt((planDetail.time/ 60).toFixed(0) / 60)}小时${(planDetail.time/ 60).toFixed(0) % 60}分钟`:`${(planDetail.time/ 60).toFixed(0)}分钟`}}</span>
        <span class="travel">{{planDetail.transit_distance>1000?`${(planDetail.transit_distance / 1000).toFixed(2)}公里`:`${planDetail.transit_distance}米`}}</span>
        <span class="walk">步行{{planDetail.walking_distance>1000?`${(planDetail.walking_distance / 1000).toFixed(2)}公里`:`${planDetail.walking_distance}米`}}</span>
        <span class="price">{{planDetail.cost}}元</span>
      </div>
    </div>
    <div class="plan-detail-list" :style="{paddingTop:planHeight}">
      <div class="list-txt clearfix" v-if="planDetail.segments&&planDetail.segments.length>0">
        <i class="fa fa-genderless circle-start" aria-hidden="true"></i>
        <span class="start">{{planDetail.start}}</span>
        <i class="icon-next"></i>
        <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
        <span class="next">{{planDetail.segments[0].instruction.substring(planDetail.segments[0].instruction.indexOf('到达') + 2)}}</span>
      </div>
      <div class="plan-show" v-for="(item,index) in planDetail.segments">
        <div class="bus-detail" v-if="item.transit_mode!=='WALK'">
          <div class="plan-title">
            <span class="start">{{item.transit.on_station.name}}</span>
            <i class="fa fa-long-arrow-right arrow" aria-hidden="true"></i>
            <span class="next">{{item.transit.off_station.name}}</span>
          </div>
          <div class="plan-data">
            <i class="icon-bus"></i>
            <span class="name">{{item.instruction.substring(item.instruction.indexOf('乘坐') + 2, item.instruction.indexOf('('))}}</span>
            <span class="time">约{{(planDetail.time/ 60).toFixed(0)>59?`${parseInt((planDetail.time/ 60).toFixed(0) / 60)}小时${(planDetail.time/ 60).toFixed(0) % 60}分钟`:`${(planDetail.time/ 60).toFixed(0)}分钟`}}</span>
            <i class="icon-up fr" v-if="!item.showList" @click="item.showList=true"></i>
            <i class="icon-down fr" v-if="item.showList" @click="item.showList=false"></i>
            <span class="num fr">{{item.transit.via_num}}站</span>
          </div>
          <div class="site-layout" v-if="item.showList">
            <div class="site-line" v-if="item.transit.via_stops.length>=2"></div>
            <ul class="site-list">
              <li v-for="(item2,index2) in item.transit.via_stops">
                <i class="sign-up" v-if="item.transit.via_stops.length>=2">上</i>
                <i class="sign-down" v-if="item.transit.via_stops.length>=2">下</i>
                <span>{{item2.name}}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="walk-detail" v-if="item.transit_mode==='WALK'">
          <i class="icon-sign"></i>
          <i class="icon-walk"></i>
          <span
            class="name">步行{{item.distance>1000?`${(item.distance / 1000).toFixed(2)}公里`:`${item.distance}米`}}</span>
          <span class="time">{{(planDetail.time/ 60).toFixed(0)>59?`${parseInt((planDetail.time/ 60).toFixed(0) / 60)}小时${(planDetail.time/ 60).toFixed(0) % 60}分钟`:`${(planDetail.time/ 60).toFixed(0)}分钟`}}</span>
        </div>
      </div>
      <div class="list-txt" v-if="planDetail.segments&&planDetail.segments.length>0">
        <i class="fa fa-genderless circle-end" aria-hidden="true"></i>
        <span class="end">{{planDetail.end}}</span>
      </div>
    </div>
    <i class="icon-code" @click="ride"></i>
  </div>
</template>
<script>
  import {jsLink} from '../utils/public.js'

  export default {
    data() {
      return {
        planDetail: {},
        showList: false,
        planHeight: '1.9rem'
      }
    },
    mounted() {
      this.onReady()
    },
    computed: {
      planDetailConfig() {
        return global.lineConfig.banner
      }
    },
    methods: {
      onReady() {
        let planDetail = JSON.parse(localStorage.getItem('planDetail'))
        if (planDetail) {
          planDetail.segments.forEach((v, i) => {
            v.showList = false
          })
          this.planDetail = planDetail
        }
      },
      ride() {
        jsLink('href', this.planDetailConfig.ride)
      }
    },
    updated() {
      let plan = document.querySelector('.plan')
      let html = document.querySelector('html')
      this.planHeight = (plan.offsetHeight + 0.3 * html.style.fontSize.replace(/px/, '')) + 'px'
    }
  }
</script>
<style scoped>
  @import "../assets/css/planDetail.css";
</style>
